<template>
  <div id='up'>
    <div class='up-box'>
      <input type="file"
        class='upfile'
        @change='filesinfo($event)'>
      <input class='file-name'
        v-model=name
        placeholder="name"
        disabled='disabled'>
      <input class='file-type'
        v-model=type
        placeholder="type"
        disabled='disabled'>
      <input type="button"
        class='up-btn'
        value='上传文件'>
    </div>
  </div>
</template>

<script>
export default {
  name: 'up',
  data() {
    return {
      addFile: {},
      name: '',
      type: '',
    }
  },
  methods: {
    filesinfo(event) {
      this.addFile = event.target.files[0]
      this.name = this.addFile.name
      this.type = this.addFile.type
    },
  },
}
</script>

<style lang='less'>
#up {
  width: 100%;
  height: 100%;
  text-align: center;
  .up-box {
    display: inline-block;
    height: auto;
    .file-name,
    .file-type {
      display: block;
      width: 100%;
      margin-top: 2rem;
      font-size: 2rem;
      text-align: center;
      margin-left: -2rem;
    }
    .upfile {
      display: block;
      margin-left: 6.5rem;
      margin-top: 2rem;
    }
    input {
      outline: none;
      border: none;
      font-size: 1rem;
    }
    .up-btn {
      background-color: rgba(72, 168, 247, 0.8);
      margin-left: -4rem;
      margin-top: 2rem;
      color: #fff;
      width: 8rem;
      height: 2.5rem;
      border-radius: 20px;
    }
  }
}
</style>